<template>
  <div>
    <div class="chaxun">
      <p>
        <span>查询</span>
      </p>
      <div class="sousuo">
        <span><input type="text" placeholder="根据菜品类别进行搜索" v-model="foodName"> <button @click="fun(foodName)">搜索</button> </span>
      </div>
    </div>

    <div class="bao">
      <p>
        <button  @click="handleClick()" type="text" size="small">新增</button>
      </p>
    
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 99%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="sortId" label="序号" width="120">
      </el-table-column>
      <el-table-column prop="sortName" label="类别名称" width="120">
      </el-table-column>
      <el-table-column prop="sortNote" label="备注" show-overflow-tooltip>
      </el-table-column>
      
      <el-table-column prop="sortStatus"   label="状态" show-overflow-tooltip>
     
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick()" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click="del(scope.$index,scope.row)">删除</el-button>
       
        </template>
      </el-table-column>
      </el-table>
        <!-- <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div> -->
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
            :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="100">
          </el-pagination>
        </div>
    </div>
    <!-- <div class="first" v-show="bool">
      <input type="text">
        <button @click="quxiao()" >X</button>
    </div> -->
    <div id="xiugaikucun" v-show="bool">
          <div class="kucuntop">修改</div>
          <div class="kuncuncenter">
            类别名称：<input type="text" v-model="mingcheng" /><br><br>
            备注：<input type="text" v-model="beizhu"><br>
            <!-- 状态：<input type="text" v-model="zhuangtai"> -->
          </div>
          <div class="kucunbottom">
            <button @click="queding()">确定</button>
            <button @click="quxiao()">取消</button>
          </div>
      </div>
  
</div>
</template>

<script>
import {findAllsort,selectone,deleteOne,insertSort} from '@/apis/huanglanglang/huanglanglang.js'
export default {

  methods: {
    // fun() {
    //   findbyname().then((ok) => {
    //     console.log(ok);
    //   })
    // },
    render(){
      findAllsort().then((ok) => {
        console.log(ok);
        this.tableData=ok.data.data.records
        // console.log(ok.data.data.records);
        let [id] =this.tableData
        this.sortid=id.sortId
      })
    },
    fun(foodName){
      
      selectone(foodName).then((ok) => {
        console.log(ok);
      this.tableData = ok.data.data
      })
    },
    del(a,b){
      deleteOne(b.sortId).then(ok=>{
      console.log(ok);
      })
      console.log(b);
    console.log(a);
    this.render()
      
    },
  

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.geshu=val
      console.log(this.geshu);
      findAllsort(this.yeshu,val).then((ok)=>{
        console.log(ok);
        this.tableData = ok.data.data.records
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.yeshu = val
      console.log(this.yeshu);
      findAllsort(val,this.geshu).then((ok)=>{
        console.log(ok);
        this.tableData = ok.data.data.records
      })
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);


        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(){
      this.bool=true
    },
    // del(){
    //   this.bool=true
    // },
    quxiao(){
      this.bool=false
    },
    queding(){
      insertSort(this.mingcheng,this.beizhu).then((ok) => {
        console.log(ok);
        this.render()
      })
      this.bool=false
    }
  },

  data() {
    return {
      bool:false,
      tableData:[{}],
      multipleSelection: [],
      foodName:"",
      sortid:"",
      mingcheng:"",
      beizhu:"",
      zhuangtai:"",
      yeshu:1,
      geshu:2
    }
  },
  mounted(){

    this.render()
  
  },

}

</script>

<style scoped>
.bao{
  height: auto;
  width: 100%;
  border: 1px solid;

}
.zeng{
  background-color: #DCDCDC;
  border-bottom: 1px solid;
  height: 50px;
  line-height: 50px;
}
.chaxun {
  height: 120px;
  width: 100%;
  border: 1px solid #DCDCDC;
  margin-bottom: 7px;
}

.chaxun p {
  height: 55px;
  width: 100%;
  background: #DCDCDC;
  line-height: 55px;
  display: block;
}

.chaxun p span {
  margin-left: 14px;
}

.chaxun b span {
  margin-left: 18px;
}

.chaxun b {
  font-weight: 400;
  width: 100%;
  height: 65px;
  line-height: 65px;
}

.chaxun b span input {
  width: 200px;
  height: 27px;
}

/* .el-table__body-wrapper {
  text-align: center;
} */
.el-table__header-wrapper {
  text-align: center;
}
.sousuo button{
margin-left: 20px;

}
.sousuo input{
margin-left: 20px;

}
.sousuo{
  height: 65px;
  line-height: 65px;
}

.block {
  float: right;
  margin-right: 50px;
}
.first{
  width: 15%;
  height: 25%;
  border-radius: 3px;
  border: 1px solid #000;
  background-color: #b4b4b4;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.first button{
  float: right;
  border: 1px solid #000;
  font-size: 30px;
  width: 32px;
  height: 32px;
  border: none;
  margin-right: 4px;
  margin-top: 4px;
}

#xiugaikucun {
  width: 15%;
  height: 18%;
  background-color: #eeecec;
  position: fixed;
  /* bottom: 100px;
  left: 560px; */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: 2px solid rgb(106, 106, 107);
}
.kucuntop {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.kucunbottom {
  display: flex;
  margin-top: 30px;
  justify-content: space-evenly;
  align-items: center;
}
</style>